<template>
  <div class="scores">
    <template v-for="index in 5">
      <svg
        class="scores__star"
        :class="{ disabled: Math.floor(score / step) < index }"
        width="14"
        height="14"
        viewBox="0 0 16 14"
        fill="#FFBB37"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M8.07162 0.28186L10.2615 4.75311L15.1589 5.46996L11.6152 8.95101L12.4513 13.8658L8.07162 11.5451L3.69193 13.8658L4.528 8.95101L0.984375 5.46996L5.88177 4.75311L8.07162 0.28186Z"
        />
      </svg>
    </template>
  </div>
</template>

<script setup>
defineProps({
  score: { type: Number, required: true },
  step: {
    type: Number,
    default: 2,
  },
});
</script>

<style scoped>
.scores {
  display: flex;
}
.scores__star {
  width: 14px;
  height: 14px;
}
.scores__star + .scores__star {
  margin-left: 4px;
}
.disabled {
  fill: rgba(255, 255, 255, 0.3);
}
</style>
